<template>
	<button :class="['mx-book-btn', btnType]" @tap="onTap">{{text[btnType]}}</button>
</template>

<script>
	import { createNamespacedHelpers } from 'vuex'
	const { mapState } = createNamespacedHelpers('arena')
	export default {
		name:"MxBookTimeBtn",
		props: {
			// 该时段信息，包括具体时间，预约状态，价格等
			section: {
				type: Object
			},
			
			// 该时段位于整个半场时段列表的 index
			index: {
				type: Number
			},
			
			// 该时段属于哪个球场
			name: {
				type: String
			},
			
			// 该时段属于哪个半场
			part: {
				type: String
			},
			
			// 该时段属于哪年
			year: {
				type: Number
			},
			
			// 该时段属于哪月
			month: {
				type: Number
			},
			
			// 该时段属于哪天
			date: {
				type: Number
			},
			
			// 该半场是否限制必须连续预约 n 场，0为不限制
			continuity: {
				type: Number
			}
			
		},
		data() {
			return {
				text: {
					'default': '预约',
					'free': '空闲',
					'booked': '已预约'
				}
			}
		},
		computed: {
			...mapState(['selectedArean']),
			// 是否已选中
			active() {
				return this.selectedArean.some(arena => this.name == arena.name && this.part == arena.part && this.section.time_fragment_id == arena.section.time_fragment_id)
			},
			
			btnType() {
				if(this.section.status === 1) {
					return 'booked'
				}
				
				if(this.section.status === 0 && this.active) {
					return 'default'
				}
				
				return 'free'
			}
		},
		methods: {
			onTap() {
				const { index, section, name, part, continuity, year, month, date } = this
				this.$emit('select', {
					index, section, name, part, continuity, year, month, date
				})
			}
		}
	}
</script>

<style scoped lang="scss">
@import './book-btn.scss';
.mx-book-btn{
	margin-right: 0;
}
</style>
